<template>
  <!--上传文档或多媒体组建-->
  <el-dialog title="上传文件" :visible.sync="value" width="30%" class="entityDialog" :before-close="closeDialog">
    <el-form label-width="80px" size="medium">
      <el-form-item label="对象选择">
        <el-input v-model="displayname" @click.native="showTree" :readonly="true" placeholder="请选择对象" style="width:100%"></el-input>
        <div v-show="isShow" class="treeDemo">
          <el-tree ref="tree" :default-expand-all="true" :props="defaultProps" :data="treeData" @node-click="handleNodeClick" :render-content="renderContent">
          </el-tree>
        </div>
      </el-form-item>
      <el-form-item>
        <!--文件上传-->
        <a class="upload">选择文件
          <input class="fileUpload" @change="handleChange()" ref="file" :accept="fileTypes" type="file" />
        </a>
      </el-form-item>
      <el-form-item v-if="file_name!=''">
        <a class="el-upload-list__item-name">
          <i class="el-icon-document"></i>{{file_name}}
          <span class="file-delete">
            <i v-if="!file_del_flag" class="el-icon el-icon-upload-success el-icon-circle-check" @mouseover="handleMouseOver"></i>
            <i @mouseout="handleMouseOut" @click="handleDelFile" v-if="file_del_flag" class="el-icon el-icon-close"></i>
          </span>
        </a>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import util from '@/utils'
import { findAllWithBizGroupAsMap, uploadFile } from '@/api/archives'
export default {
    name: 'docOrMediaUpload',
    data () {
        return {
            displayname: '',
            // 树状菜单数据
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'displayname'
            },
            current_selectd_node: '',
            // 当前选择的文件
            current_file: '',
            // 文件名
            file_name: '',
            isShow: false,
            // 删除文件标识符
            file_del_flag: false,
            file_type: '',
            document_accept: ['txt', 'doc', 'pdf', 'docx', 'xlsx', 'xls', 'html'],
            media_accept: ['png', 'gif', 'jpg', 'mp4', 'ogg', 'mpeg', 'webm', 'mp3']
        }
    },
    props: {
        value: Boolean
    },
    watch: {
        fileList () {
            if (this.fileList.length >= 1) {
                this.isDisabled = true
            } else {
                this.isDisabled = false
            }
        }
    },
    computed: {
        fileTypes () {
            if (this.file_type.split('.').includes('document')) {
                return this.document_accept.map(item => '.' + item).join(',')
            } else {
                return this.media_accept.map(item => '.' + item).join(',')
            }
        }
    },
    methods: {
        handleMouseOver () {
            this.file_del_flag = true
        },
        handleMouseOut () {
            this.file_del_flag = false
        },
        handleDelFile () {
            this.current_file = ''
            this.file_name = ''
        },
        handleChange () {
            let file = this.$refs.file.files[0]
            let { name, size } = file
            size = (file.size) / 1024 / 1024
            if (size > 10) {
                this.$message({ message: '文件大小最大支持10M.' })
                return false
            }
            let names = name.split('.')
            let fileType = names[names.length - 1]
            if (this.file_type.split('.').includes('document')) {
                if (!this.validFileType(this.document_accept, fileType)) {
                    this.$message({ message: '请上传文档类型的文件' })
                    return false
                }
            } else {
                if (!this.validFileType(this.media_accept, fileType)) {
                    this.$message({ message: '请上传多媒体的文件' })
                    return false
                }
            }
            this.current_file = file
            this.file_name = name
        },
        handleNodeClick (data, node) {
            if (node.level === 1) {
                return false
            }
            this.current_selectd_node = data
            this.displayname = data.displayname
            this.file_type = data.uri
            this.isShow = false
        },
        // 显示对象树
        showTree () {
            this.loadTree()
            this.isShow = true
        },
        handleDisChoose () {
            this.isShow = false
        },
        // 加载左侧菜单树
        async loadTree () {
            let params = {
                groupList: ['document', 'media']
            }
            let data = await findAllWithBizGroupAsMap(params)
            this.treeData = util.parseKeyData(data)
        },
        renderContent (h, { node, data }) {
            let img
            if (!util.isEmpty(data.icon)) {
                img = (
                    <img src={data.icon} class="userIcon" width="16px" height="16px" />
                )
            }
            return (
                <p>
                    {img}
                    <span style="margin-left:10px;">{node.label}</span>
                </p>
            )
        },
        validFileType (fileTypes, fileType) {
            for (var i = 0; i < fileTypes.length; i++) {
                if (fileType.indexOf(fileTypes[i]) != -1) {
                    return true
                }
            }
            return false
        },
        // 表单提交
        handleSubmit () {
            if (this.displayname === '') {
                this.$message.error('请选择对象')
                return
            }
            if (this.current_file === '') {
                this.$message({ message: `请选择需要上传的文件` })
                return false
            }
            let objectUri = this.current_selectd_node.uri
            let fd = new FormData()
            fd.append('file', this.current_file)
            fd.append('objectUri', objectUri)
            fd.append('rowkey', '')
            uploadFile(fd).then(data => {
                this.$message({ message: '上传成功', type: 'success' })
                this.$emit('getAssociationInfo', data.data)
                this.closeDialog()
            })
        },
        // 关闭对话框
        closeDialog () {
            this.$emit('input', false)
            this.treeData = []
            this.isShow = false
            this.displayname = ''
            this.current_file = ''
            this.file_name = ''
        }
    }
}
</script>
<style lang="less"  >
.entityDialog {
  .el-checkbox__inner {
    border-radius: 10px;
  }
  .userIcon {
    position: relative;
    top: 10px;
  }
  .treeDemo {
    width: 60%;
    position: absolute;
    background-color: #fff;
    z-index: 33;
    border: 1px solid #e0e0e0;
    padding: 10px 0 30px;
    .opreation {
      margin-top: 10px;
      text-align: right;
      padding-right: 10px;
      .el-button {
        padding: 5px 15px;
        line-height: 16px;
      }
    }
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .upload {
    padding: 10px 15px;
    height: 20px;
    line-height: 20px;
    position: relative;
    background: #3a8ee6;
    text-decoration: none;
    border-radius: 5px;
    color: #ffffff;
  }
  .fileUpload {
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 0;
    opacity: 0;
  }
  .file-delete {
    float: right;
    .el-icon {
      color: #67c23a;
    }
  }
}
</style>
